<template>
    <div>
        <p>$store.state.count: {{ $store.state.count }}</p>
        <p>$store.getters.doubleCount: {{ $store.getters.doubleCount }}</p>
        <button @click="add">addCount + 1</button>
        <button @click="asyncAdd">asyncAddCount + 2</button>
    </div>
</template>

<script>
export default {
    nname: 'Home',
    created () {
        this.$store.state = {count: 10};
    },
    methods: {
        add() {
            this.$store.commit('addCount', 1)
        },
        asyncAdd() {
            this.$store.dispatch('asyncAddCount', 2)
        }
    },
}
</script>

<style lang="scss" scoped>
</style>